<template>
  <div>
    <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>
    <div><br />
    </div>
    <div id="xlsxChart"style="width: 100%;height: 600%;"></div>
  </div>

</template>

<script>
  import echarts from "echarts";
  export default {
    name: "graph",
    data() {
      return {
        tableData: [],
        settings: {},
        myChart: null,
        xLength: null,
        yLength:null,
        outdata: null,
      };
    },

    mounted(){
      this.settings = this.$route.query.a
      this.yLength = this.$route.query.b
      this.xLength = this.$route.query.c
      this.outdata = this.$route.query.d
      this.updateChart()
    },

    methods:{
      //初始化echartInstance对象
      initChart(){
        this.myChart = echarts.init(document.getElementById('xlsxChart'));
      },
      //更新图标
      updateChart(){
        const yL = this.yLength
        const xL = this.xLength
        const odata = this.outdata
        const headrt = this.settings.colHeaders
        var xydata = [];
        sxs: (function() {
          for (var i = 1; i <= yL; i++) {
            xydata.push({
              id: i,
              name: odata[i][0],
              symbolSize: 15
            });
          }
          for (var i = 1; i < xL; i++) {
            xydata.push({
              id: i + yL,
              name: headrt[i],
              symbolSize: 40
            });
          }
          /* console.log("*****", xydata) */
          return xydata;
        })()
        this.Adata = xydata;
        console.log("@#$", this.Adata)

        var allLength = xydata.length
        var hLength = allLength-yL

        var xylinks=[];
        sys: (function() {
          for (var i = 0; i <= yL; i++) {
            for(var j =hLength ;j <= allLength; j++){
              xylinks.push({
                source: i,
                target: j,
              });
            }
          }
          console.log("*****", xylinks)
          return xylinks;
        })()
        const option = {
          title:{
            text:"关系图"
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [{
            type: 'graph',
            roam: true,
            draggable: true,
            layout: 'circular', //设置关系图的形状， layout: force'circular'为圆型
            data: xydata,
            links: xylinks,
          }]
        }
        let myChart = echarts.init(document.getElementById('xlsxChart'));
        myChart.setOption(option)
      },
    }
  }

</script>

<style scoped>

</style>
